<template>
  <view class="mine-container">
    <view
      class="mall-container"
      :style="'padding-top:' + setting.header.allHeight + 'px'"
    >
      <view
        class="mine-header"
        :style="
          'height:' +
          setting.header.height +
          'px;' +
          'padding-top:' +
          setting.header.top +
          'px;padding-bottom:12upx'
        "
      >
        <view class="inner">
          <image
            src="http://static.kuaimayoupin.com/0119432821369318.png"
            mode=""
            class="mine-return-img"
            @click="toMine"
            v-if="!setting.isHomePage"
          ></image>
        </view>
      </view>
      <view class="mine-card">
        <view class="inner">
          <view class="mine-card-left">
            <view class="mine-head-box" v-if="userInfo.avatar"
              ><image
                :src="userInfo.avatar"
                mode="aspectFit"
                class="mine-head"
              ></image
            ></view>
            <view class="mine-head-box" v-else
              ><image
                src="http://static.kuaimayoupin.com/5814340611455953.png"
                mode="aspectFit"
                class="mine-head"
              ></image
            ></view>
          </view>
          <view class="mine-card-right" v-if="userInfo">
            <view class="mine-info">
              <view class="mine-name">{{
                userInfo.nick_name || "用户名"
              }}</view>
              <text class="mine-tag orange-tag" v-if="userInfo.vip">{{
                userInfo.vip == -1 ? "非会员" : userInfo.vip
              }}</text>
              <text class="mine-tag blue-tag">{{
                userInfo.certificated ? "已认证" : "未认证"
              }}</text>
              <navigator url="/pageA/my-profile/my-profile">
                <image
                  src="http://static.kuaimayoupin.com/3843081084037387.png"
                  mode="aspectFit"
                  class="mine-edit"
                ></image>
              </navigator>
            </view>
            <view class="mine-address"> ID:{{ idCode }} </view>
            <view class="mine-address"
              >{{ userInfo.work_place ? "现居" + userInfo.work_place : ""
              }}{{ userInfo.job ? "/" + userInfo.job : "" }}</view
            >
            <view class="mine-signature">{{
              userInfo.soliloquy ? userInfo.soliloquy : ""
            }}</view>
            <view class="tag-box">
              <text
                class="mine-tag orange-tag border-none"
                v-if="userInfo.age"
                style="border: none; background: #d6d5d3"
                >{{ userInfo.age + "岁" }}</text
              >
              <text
                class="mine-tag pink-tag border-none"
                v-if="userInfo.constellation"
                style="border: none; background: #d6d5d3"
                >{{ userInfo.constellation }}</text
              >
            </view>
          </view>
          <view class="mine-card-right" v-else>
            <!-- #ifdef MP-WEIXIN -->
            <button
              open-type="getPhoneNumber"
              @getphonenumber="decryptPhoneNumber"
              class="login-opt-btn"
              type="default"
            >
              点击登录/注册
            </button>
            <!-- #endif -->
            <!-- #ifdef APP-VUE -->
            <view @click="toTelLogin" class="login-opt-btn">点击登录/注册</view>
            <!-- #endif -->
          </view>
        </view>
      </view>
    </view>
    <view class="mine-card-bot">
      <view class="inner">
        <view class="mine-tab">
          <view class="mine-tab-head">
            <view class="tab-head">
              <template v-for="(item, index) in tabSetting.view">
                <view
                  :class="[
                    'tab-head-item',
                    defaultActive == index ? 'active' : '',
                  ]"
                  :key="index"
                  @click="tabEvent(index)"
                  >{{ item.label }}</view
                >
              </template>
            </view>
            <!-- 成长足迹 -->
            <view class="swiper-item" v-if="defaultActive == 0">
              <template v-if="tabSetting.view[0].data.length">
                <view
                  class="life-experience"
                  v-for="(item, index) in tabSetting.view[0].data"
                  :key="index"
                >
                  <view class="life-experience-icon"
                    ><image
                      src="/static/images/mine/life-experience-icon.png"
                      mode=""
                      class=""
                    ></image
                  ></view>
                  <view class="life-experience-line">
                    <view class="life-experience-top">
                      <view class="life-experience-time">{{
                        item.created_time | dateformat
                      }}</view>
                      <view
                        class="life-experience-operation"
                        @click="openOperation(index)"
                      >
                        <text class="dot"></text>
                        <text class="dot"></text>
                        <text class="dot"></text>
                        <view
                          :class="[
                            'life-experience-btn',
                            showOperation == index ? 'on' : '',
                          ]"
                        >
                          <!-- <view class="on">分享</view> -->
                          <view @click="remove(item._id)">删除</view>
                        </view>
                      </view>
                    </view>
                    <view class="life-experience-content" v-if="item.note">
                      <rich-text>{{ item.note }}</rich-text>
                    </view>
                    <template v-if="item.pic_urls">
                      <img-box
                        :imgList="item.pic_urls"
                        :num="item.pic_urls.length"
                      ></img-box>
                    </template>
                    <template
                      v-if="item.video_url && item.pic_urls.length == 0"
                    >
                      <view class="video_box"
                        ><video
                          :src="item.video_url"
                          :autoplay="false"
                          :loop="false"
                        ></video
                      ></view>
                    </template>
                  </view>
                </view>
              </template>
              <template v-else>
                <fansempty />
              </template>
            </view>
            <!-- 模态框 -->
            <u-modal
              v-model="modalSetting.show"
              :content="modalSetting.message"
              :show-cancel-button="true"
              @confirm="deleteDynamic"
            ></u-modal>
            <u-toast ref="uToast" />
            <!-- 个人资料 -->
            <view class="swiper-item" v-if="defaultActive == 1">
              <view class="personal-data-tag-box" v-if="characters.length">
                <block v-for="(character, index) in characters" :key="index">
                  <text :class="['personal-data-tag', tagList[index]]">{{
                    character
                  }}</text>
                </block>
              </view>
              <view class="basic-data">
                <view class="basic-data-title">基本信息</view>
                <view class="basic-data-ul">
                  <view class="basic-data-li">
                    <text class="basic-data-label">年龄：</text>
                    <view class="basic-data-content">{{
                      `${userInfo.birthday||'0'} ${userInfo.age||'0'}岁 ${userInfo.constellation||'保密'}`
                    }}</view>
                  </view>
                  <view class="basic-data-li">
                    <text class="basic-data-label">婚况：</text>
                    <view class="basic-data-content">{{
                      userInfo.marital_status == "-1"
                        ? ""
                        : userInfo.marital_status
                    }}</view>
                  </view>
                  <view class="basic-data-li">
                    <text class="basic-data-label">籍贯：</text>
                    <view class="basic-data-content">{{ userInfo.province }}</view>
                  </view>
                  <view class="basic-data-li">
                    <text class="basic-data-label">身高：</text>
                    <view class="basic-data-content">{{
                      userInfo.height + "cm"
                    }}</view>
                  </view>
                  <view class="basic-data-li">
                    <text class="basic-data-label">工作：</text>
                    <view class="basic-data-content">{{
                      userInfo.job == "-1" ? "" : userInfo.job
                    }}</view>
                  </view>
                  <view class="basic-data-li">
                    <text class="basic-data-label">单位性质：</text>
                    <view class="basic-data-content">{{
                      userInfo.work_type
                    }}</view>
                  </view>
                  <view class="basic-data-li">
                    <text class="basic-data-label">工作地：</text>
                    <view class="basic-data-content">{{
                      userInfo.work_place == "-1" ? "" : userInfo.work_place
                    }}</view>
                  </view>
                  <view class="basic-data-li">
                    <text class="basic-data-label">月薪：</text>
                    <view class="basic-data-content">
                      <template
                        v-if="userInfo.vip == -1 || userInfo.vip == 'undefind'"
                      >
                        VIP可见
                        <view class="open-up">去开通</view>
                      </template>
                      <template v-else>
                        {{ userInfo.salary == "-1" ? "" : userInfo.salary }}
                      </template>
                    </view>
                  </view>
                  <view class="basic-data-li">
                    <text class="basic-data-label">学历：</text>
                    <view class="basic-data-content">
                      <template
                        v-if="userInfo.vip == -1 || userInfo.vip == 'undefind'"
                      >
                        VIP可见
                      </template>
                      <template v-else>
                        {{
                          userInfo.education == "-1" ? "" : userInfo.education
                        }}
                      </template>
                    </view>
                  </view>
                  <view class="basic-data-li">
                    <text class="basic-data-label">住房：</text>
                    <view class="basic-data-content">
                      <template
                        v-if="userInfo.vip == -1 || userInfo.vip == 'undefind'"
                      >
                        VIP可见
                      </template>
                      <template v-else>
                        {{ userInfo.housing == "-1" ? "" : userInfo.housing }}
                      </template>
                    </view>
                  </view>
                </view>
                <view class="basic-data-li">
                  <text class="basic-data-label">手机号：</text>
                  <view class="basic-data-content">{{
                    userInfo.mobile | filtrationmobile
                  }}</view>
                </view>
              </view>
            </view>
            <button class="share-btn" open-type="share">分享相亲卡片</button>
          </view>
        </view>
      </view>
    </view>
  </view>
  <!-- </view> -->
</template>

<script>
import mineTab from "../components/mine-tab/mine-tab.vue";
import imgBox from "../components/imageTypeSet/imagebox.vue";
import { talkingTipList, statistics, deleteDynamic } from "@/api/user/user.js";
import fansempty from "@/pageA/empty/empty.vue";
export default {
  components: {
    mineTab,
    imgBox,
    fansempty,
  },
  filters: {
    filtrationmobile(value) {
      if (value) {
        const reg = /^(\d{3})\d{4}(\d{4})$/;
        return value.replace(reg, "$1****$2");
      }
    },
  },
  data() {
    return {
      tagList: ["personal-orange", "personal-yellow", "personal-green"],
      tabSetting: {
        view: [
          {
            label: "成长足迹",
            data: [],
          },
          {
            label: "个人资料",
          },
        ],
      },
      userInfo: {},
      setting: {
        header: {
          top: 0,
          height: 0,
          allHeight: 0,
        },
      },
      defaultActive: 1,
      showOperation: -1,
      talkingTipList: [],
      removeId: "",
      modalSetting: {
        show: false,
        message: "确认删除该动态?",
      },
      characters: [],
      idCode: "",
    };
  },
  onShareAppMessage(res) {
    let userId = this.userInfo.user_id || "";
    let url = "/pageA/personalHome/personalHome?user_id=" + userId;
    console.log(`onShareAppMessage: ${url}`)
    return {
      title: "最近超好玩超火爆的脱单神器,没时间解释啦,快点来看看吧",
      path: url,
    };
  },
  onLoad(option) {
    this.defaultActive = option.index || 1;
  },
  onShow() {
    uni.getStorage({
      key: "userInfo",
      success: (res) => {
        this.userInfo = Object.assign({}, res.data);
        this.idCode = this.userInfo.codeID;
        console.log(this.idCode);
        if (this.userInfo.character.length > 0) {
          this.characters = this.userInfo.character.split(";");
          for (var i = 0; i < this.characters.length; i++) {
            if (this.characters[i] == "") {
              this.characters.splice(i, 1);
            }
          }
        }
      },
    });
    this.init();
  },
  created() {
    const header = uni.getMenuButtonBoundingClientRect();
    this.setting.header.top = header.top;
    this.setting.header.height = header.height;
    this.setting.header.allHeight = header.top + header.height + 6;
  },
  methods: {
    init() {
      talkingTipList().then((res) => {
        if (res.status == 1) {
          this.tabSetting.view[0].data = res.data;
        }
      });
    },
    toMine() {
      uni.navigateBack({
        delta: 1,
      });
    },
    openOperation(index) {
      this.showOperation == index
        ? (this.showOperation = -1)
        : (this.showOperation = index);
    },
    tabEvent(index) {
      this.defaultActive = index;
    },
    remove(id) {
      this.modalSetting.show = true;
      this.removeId = id;
    },
    deleteDynamic() {
      deleteDynamic(this.removeId).then((res) => {
        if (res.status == 1) {
          this.$refs.uToast.show({
            title: res.message,
            type: "success",
          });
          this.init();
        } else {
          this.$refs.uToast.show({
            title: res.message,
            type: "error",
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.mine-container {
  background-color: #fff;
}

.mall-container {
  background-image: url("http://static.kuaimayoupin.com/529894327355388.png");
  background-repeat: no-repeat;
  background-size: 100%;
}

.mine-header {
  position: fixed;
  top: 0;

  .mine-return-img {
    display: block;
    width: 24px;
    height: 24px;
  }
}

.mine-card {
  padding-bottom: 80upx;

  .inner {
    display: flex;
    justify-content: flex-start;
  }
}

.mine-card-bot {
  border-radius: 12px 12px 0 0;
  margin-top: -50upx;
  background-color: #fff;
  padding-top: 40upx;
  padding-bottom: 60px;
}

.mine-tab {
  width: 100%;
}

.tab-head {
  font-size: 36upx;
  color: rgba(131, 137, 160, 1);
  line-height: 48upx;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 30upx;

  .tab-head-item {
    margin-right: 40upx;
  }

  .tab-head-item.active {
    font-weight: 500;
    color: rgba(71, 74, 88, 1);
  }

  .tab-head-item.active:after {
    content: "";
    display: block;
    margin: auto;
    width: 32upx;
    height: 8upx;
    background: linear-gradient(
      299deg,
      rgba(248, 212, 87, 1) 0%,
      rgba(254, 21, 194, 1) 100%
    );
    border-radius: 4px;
  }
}

.life-experience {
  display: flex;
  justify-content: flex-start;

  .life-experience-icon,
  .life-experience-icon image {
    display: block;
    width: 32upx;
    height: 32upx;
  }

  .life-experience-line {
    margin-left: 20upx;
    width: 618upx;
    flexgrow: 1;
    margin-bottom: 30upx;

    .life-experience-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .life-experience-time {
      font-size: 28upx;
      color: rgba(131, 137, 160, 1);
    }

    .life-experience-content {
      line-height: 50upx;
    }
  }

  .life-experience-operation {
    position: relative;

    .dot {
      display: inline-block;
      width: 5px;
      height: 5px;
      background: rgba(206, 209, 221, 1);
      margin-left: 10upx;
    }

    .life-experience-btn {
      position: absolute;
      right: 0;
      top: 52upx;
      display: none;
      border: 1px solid rgba(233, 235, 240, 1);
      z-index: 99;

      view {
        width: 196upx;
        line-height: 80upx;
        background: rgba(255, 255, 255, 1);
        text-align: center;

        .on {
          background: rgba(243, 246, 248, 1);
        }
      }
    }

    .life-experience-btn.on {
      display: block;
    }
  }
}

.personal-data-tag-box {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  .personal-data-tag {
    width: 210upx;
    text-align: center;
    line-height: 64upx;
    border-radius: 2px;
    margin-right: 30upx;
  }
  .personal-data-tag:nth-child(3n) {
    margin-right: 0;
  }
}

.tab-view {
  min-height: 300upx;
}

.basic-data-title {
  line-height: 42upx;
  font-size: 32upx;
  font-weight: 500;
  color: rgba(71, 74, 88, 1);
  margin: 60upx 0 40upx;
}

.basic-data-li {
  font-size: 32upx;
  font-weight: 400;
  color: rgba(71, 74, 88, 1);
  line-height: 60upx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.basic-data-content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.basic-data-content .open-up {
  background: linear-gradient(
    223deg,
    rgba(255, 232, 135, 1) 0%,
    rgba(244, 196, 73, 1) 100%
  );
  border-radius: 12px;
  color: rgba(139, 87, 42, 1);
  font-size: 28upx;
  font-weight: 500;
  width: 124upx;
  line-height: 48upx;
  text-align: center;
  margin-left: 20upx;
}

.share-btn {
  background: linear-gradient(
    135deg,
    rgba(252, 79, 145, 1) 0%,
    rgba(253, 108, 230, 1) 100%
  );
  border-radius: 2px;
  color: #fff;
  margin-top: 60upx;
}

.video_box {
  padding: 20upx 0;
}

.toMine {
  position: fixed;
}
.border-none {
}
</style>
